﻿.btn {
    box-sizing: border-box;
    border-radius: 0.2em;
    border: 1px solid #444;
}

    .btn > i {
        position: relative;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        font-style: normal;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        flex-flow: column;
        justify-content: center;
        transition: background 0.2s ease-in,color 0.2s;
        background: rgba(240,128,128,0); /* lighcoral*/
        border-radius: 0.2em;
    }

    .btn.active > i {
        background: rgba(240,128,128,1); /* lighcoral*/
        transition: none;
    }

    .btn.btn-noborder {
        border: none;
    }

    .btn.switch > i {
        transition: background 0.1s;
        background: rgba(173, 255, 73, 0); /* greenyellow*/
    }

    .btn.switch.on > i {
        background: rgba(135, 214, 0, 0.45); /* greenyellow*/
    }

    .btn.switch.active > i {
        background: rgba(135, 214, 0, 0.6); /* greenyellow*/
    }

    .btn.disabled {
        color: #aaa;
    }

        .btn.disabled > i,
        .btn.switch.disabled > i {
            background: none;
        }
